import React from 'react'; 
import { Button, message, Icon, Modal } from 'antd';
import { isEqual } from 'lodash';
import {WeaErrorPage, WeaTools, WeaDialog, WeaRightMenu, WeaEchart, WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EChartEditor from './EchartEditor';
import EchartType from './examples/';
//门户组件
class EChartList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        }
        this.getButtons = this.getButtons.bind(this);
        this.getRightMenu = this.getRightMenu.bind(this);
        this.onRightMenuClick = this.onRightMenuClick.bind(this);
        this.onDelete = this.onDelete.bind(this);
        this.onEdit = this.onEdit.bind(this);
    }
    getButtons(){
        let btns = [];
        btns.push(<div><a href="http://echarts.baidu.com/" target="_blank">{getLabel(388003,"点击查看ECharts官方文档")}</a></div>);
        return btns;
    }
    getRightMenu(){
        let btns = [];
        btns.push({
            icon: <i className='icon-coms-Web-service'/>,
            content: getLabel(31129, '取消'),
        }); 
        return btns
    }
    onRightMenuClick(key){
        switch(key){
            case '0':
                this.setState({visible:false});
                break;
        }
    }
    onDelete(item){
        Modal.confirm({
            title: getLabel(386786,"信息确认"),
            content: getLabel(15097,"确定要删除吗？"),
            onOk: () => {
                const { datas, onChangeDatas } = this.props;
                WeaTools.callApi('/api/portal/hpEcharts/delete', 'POST', {id:item.id}).then(result=> {
                    if(result.api_status == 'success'){
                        message.success(getLabel(83472, "删除成功！"));
                        datas.remove(item);
                        onChangeDatas(datas);
                    }else{
                        message.error(getLabel(83473, "删除失败！"));
                    }
                });
            },
        });
    }
    onEdit(state){
        this.refs.EChartEditor.setState(state)
    }
    render() {
        const { visible } = this.state;
        const { sysDatas, datas, onChangeDatas } = this.props;
        return <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@9orzc4`} 
                  title={getLabel(388004,"图表库")}
                  visible={visible}
                  closable={true}
                  onCancel={()=>this.setState({visible:false})}
                  icon='icon-coms-portal'
                  iconBgcolor='#1a57a0'
                  maskClosable={false}
                  buttons={this.getButtons()}
                  style={{width:1080,height:660}}
                  >
                  <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mb1f73`} datas={this.getRightMenu()} onClick={this.onRightMenuClick}>
                     <div id="portal-echartlist-container" className="portal-echartlist-container">
                        <EChartEditor ecId={`${this && this.props && this.props.ecId || ''}_EChartEditor@eaqpg6`} ref="EChartEditor" callback={onChangeDatas}/>
                        {sysDatas.map(item=>(<EChartItem ecId={`${this && this.props && this.props.ecId || ''}_EChartItem@zrcfso@${`sys-${item.id}`}`} key={`sys-${item.id}`} isSys={true} item={item} onEdit={this.onEdit} onDelete={this.onDelete}/>))}
                        {datas.map(item=>(<EChartItem ecId={`${this && this.props && this.props.ecId || ''}_EChartItem@ixq3b5@${`sys-${item.id}`}`} key={`sys-${item.id}`} item={item} onEdit={this.onEdit} onDelete={this.onDelete}/>))}
                     </div>
                  </WeaRightMenu>
            </WeaDialog>
    }

}

class EChartItem extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidUpdate(prevProps){
        if(!isEqual(prevProps.item, this.props.item) || prevProps.isSys != this.props.isSys){
            this.refs.chart.clear();
            this.refs.chart.paint();
        }
    }
    render() {
        let { item, isSys, onEdit, onDelete } = this.props;
        let obj = item;
        if(isSys){
            obj = {
                id: item.key,
                title: item.value,
                isSys: true,
                option: EchartType[item.key],
            }
        }else{
            obj.isSys = false;
        }
        const { title, option } = obj;
        return (<div className="portal-echartlist-item" title={title} onMouseOver={e=>{
                  $(e.currentTarget).find(".portal-echartlist-item-opts").show();
             }} onMouseLeave={e=>{
                  $(e.currentTarget).find(".portal-echartlist-item-opts").hide();
             }}>
             <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@e5iz7n`} ref="chart" useDefault={true} chartName={title} option={option}/>
             <div className="portal-echartlist-item-shadow"></div> 
             <div className="portal-echartlist-item-opts">
                    <div class="portal-echartlist-item-edit" title={getLabel(26473, '编辑')}>
                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@1m2qxf`} type="edit" onClick={onEdit.bind(this,{...obj, visible: true})}/>
                    </div>
                    {!isSys && <div class="portal-echartlist-item-delete">
                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@8y5pe0`} type="delete" onClick={onDelete.bind(this,obj)}/>
                    </div>}
              </div> 
        </div>)
    }
}


class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return ( <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@823cfg`} msg={ hasErrorMsg ? this.props.error : getLabel(385218,"对不起，该页面异常，请联系管理员！")}/>
        );
    }
}
EChartList = WeaTools.tryCatch(React, MyErrorHandler, {error: ""})(EChartList);
export default EChartList;

